<template>
  <div class="app-container">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-input v-model="listContext.httpMethod" placeholder="搜索" @keyup.enter.native="fetchData" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">
          <i class="el-icon-search" />
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="LoadingWithThreeDot"
      border
      fit
      highlight-current-row
      @sort-change="sortChange"
    >
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-dropdown trigger="click" @command="clickActionDropDown">
            <el-button type="primary">
              <i class="el-icon-setting" />
              操作
              <i class="el-icon-arrow-down" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ action: 'detail', row: scope.row }">详情</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <!-- <el-table-column label="动作" sortable>
        <template slot-scope="scope">
          {{ scope.row.action }}
        </template>
      </el-table-column> -->

      <el-table-column label="Http请求">
        <template slot-scope="scope">

          <el-tag type="danger">{{ scope.row.httpStatusCode }}</el-tag>
          <el-tag type="warning">{{ scope.row.httpMethod }}</el-tag>
          {{ scope.row.url }}

        </template>
      </el-table-column>

      <el-table-column label="用户">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
      <el-table-column label="ip地址">
        <template slot-scope="scope">
          {{ scope.row.clientIpAddress }}
        </template>
      </el-table-column>
      <el-table-column label="时间" sortable>
        <template slot-scope="scope">
          {{ scope.row.executionTime }}
        </template>
      </el-table-column>
      <el-table-column label="持续时间" sortable>
        <template slot-scope="scope">
          {{ scope.row.executionDuration }}
        </template>
      </el-table-column>
      <el-table-column label="应用名称" sortable>
        <template slot-scope="scope">
          {{ scope.row.applicationName }}
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <div class="block" style="margin-top: 10px">
      <el-pagination
        :page-sizes="pageContext.pageSizes"
        :page-size.sync="listContext.maxResultCount"
        :current-page.sync="pageContext.currentPage"
        :total="pageContext.totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="fetchData"
        @current-change="handleCurrentChange"
      />
    </div>
    <detail ref="detail" :visible.sync="detailDialogVisible" :context="detailDialogCtx" @saveSucceed="fetchData" />
  </div>
</template>

<script>
import { getList } from '@/api/administration/auditLog/auditLog'

import detail from '@/views/administration/auditLog/components/detail'

export default {
  components: { detail },
  data() {
    return {
      list: null,
      listLoading: false,
      pageContext: {
        pageSizes: [10, 25, 50, 100],
        totalCount: 0,
        currentPage: 1
      },
      listContext: {
        httpMethod: '',
        sorting: '',
        skipCount: 0,
        maxResultCount: 10
      },
      detailDialogCtx: {
        id: ''
      },
      detailDialogVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.listContext).then((response) => {
        this.list = response.data.items
        console.log(this.list)
        this.pageContext.totalCount = response.data.totalCount
        this.listLoading = false
      })
    },
    handleCurrentChange(currentPage) {
      this.listContext.skipCount = (currentPage - 1) * this.listContext.maxResultCount
      this.fetchData()
    },
    sortChange({ prop, order }) {
      this.listContext.sorting = ''
      if (order) {
        this.listContext.sorting = prop + ' ' + order
      }
      this.fetchData()
    },
    clickActionDropDown(ctx) {
      switch (ctx.action) {
        case 'detail':
          this.openDetailDialog(ctx.row.id)
          break
      }
    },
    openDetailDialog(id) {
      this.detailDialogVisible = true
      this.detailDialogCtx = {
        id: id
      }
    }
  }
}
</script>

